<template>
  <div class="service-bank">
    <loading :show="loading" />
    <div class="notice">
      <p>请认真填写,主要用途:</p>
      <p>1, 余额提现</p>
    </div>
    <div class="form">
      <p>
        <label>姓名:</label>
        <span>
          <cube-input type="text" v-model.trim="postForm.nickname" />
        </span>
      </p>
      <p>
        <label>银行名称:</label>
        <span>
          <cube-input type="text" v-model.trim="postForm.bank_name" />
        </span>
      </p>
      <p>
        <label>开户行:</label>
        <span>
          <cube-input type="text" v-model.trim="postForm.bank_x" />
        </span>
      </p>
      <p>
        <label>卡号:</label>
        <span>
          <cube-input type="text" v-model.trim="postForm.bank_number" />
        </span>
      </p>
      <p>
        <label>预留手机:</label>
        <span>
          <cube-input type="text" v-model.trim="postForm.mobile" />
        </span>
      </p>
      <p class="submit">
        <span @click="save">保存</span>
      </p>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceBank',
  components: {
    Loading
  },
  data() {
    return {
      postForm: {},
      loading: false,
      disabled: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      api.Exec.bankFetch().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.postForm = data.bank || {}
      }).finally(() => {
        this.loading = false
      })
    },
    save() {
      if (!this.postForm.nickname || !this.postForm.bank_name || !this.postForm.bank_number || !this.postForm.mobile || !this.postForm.bank_x) {
        return this.$createToast({
          type: 'error',
          txt: '请填写完成',
          time: 1000
        }).show()
      }
      if (Number.isNaN(+this.postForm.bank_number)) {
        return this.$createToast({
          type: 'error',
          txt: '银行卡号错误',
          time: 1000
        }).show()
      }
      // api save
      if (!this.disabled) {
        this.loading = true
        this.disabled = true
        api.Exec.bankEdit({ ...this.postForm }).then(() => {
          this.$createToast({
            type: 'correct',
            txt: '操作成功',
            time: 300
          }).show()
        }).finally(() => {
          this.loading = false
          this.disabled = false
        })
      }
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.service-bank
  .notice
    background white
    padding 10px
    border-radius 10px
    font-size 14px
    p
      line-height 30px
  .form
    margin 10px 0
    padding 20px 10px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 85px
        text-align right
        padding-right 10px
        font-weight 700
        font-size 14px
      span
        flex 1
        padding-right 15px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px
</style>
